<template>
    <div>
        <Modal v-model="modalShow" :closable='false' :mask-closable=false width="650">
            <p slot="header">修改车辆信息</p>
            <Form ref="formData" :model="formData" :rules="rules" label-position="right" :label-width="100">
                <FormItem label="汽车品牌：" prop="brand">
                    <Input v-model="formData.brand"></Input>
                </FormItem>
                <FormItem label="系列名称：" prop="series">
                    <Input v-model="formData.series"></Input>
                </FormItem>

                <FormItem label="车架号：" prop="frame_no">
                    <Input v-model="formData.frame_no" placeholder="输入 17 位数车架号"></Input>
                </FormItem>

                <Row>
                    <Col span="10">
                        <FormItem label="行驶里程：" prop="mileage">
                            <Input v-model.number="formData.mileage" placeholder="输入行驶里程">
                            <span slot="append">公里</span>
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="10" offset="1">
                        <FormItem label="车辆价格：" prop="new_price">
                            <Input v-model="formData.new_price" placeholder="输入车辆价格">
                            <span slot="append">万</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10">
                        <FormItem label="初次登记：" prop="first_at">
                            <DatePicker type="date" :value="formData.first_at" @on-change="handleFirstChange"
                                        format="yyyy-MM-dd" placeholder="选择初次登记时间" style="width: 100%"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="10" offset="1">
                        <FormItem label="入档日期：" prop="filed_at">
                            <Input v-model="formData.filed_at" disabled></Input>
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span="10">
                        <FormItem label="诊断工程师：" prop="engineer">
                            <Input v-model="formData.engineer" placeholder="输入工程师姓名"></Input>
                        </FormItem>
                    </Col>
                    <Col span="10" offset="1">
                        <FormItem label="诊断日期：" prop="diagnosis_at">
                            <DatePicker type="date" :value="formData.diagnosis_at" @on-change="handleDiagnosisChange"
                                        format="yyyy-MM-dd" placeholder="选择诊断日期" style="width: 100%"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>

                <FormItem label="诊断评价：" prop="engineer_comment">
                    <Input v-model="formData.engineer_comment" type="textarea" :rows="3" placeholder="输入工程师评价..."/>
                </FormItem>

                <!--<FormItem label="鉴定报告：">-->
                    <!--<Input v-model="formData.appraisal_report" type="textarea" :rows="2" placeholder="输入鉴定报告链接"/>-->
                <!--</FormItem>-->
                <FormItem label="诊断报告：" prop="diagnosis_report">
                    <upload v-if='formdataFinished' :is-delete='false' v-model="formData.diagnosis_report"
                            :upload-config="zdImguploadConfig" @on-upload-change='uploadChange'></upload>
                </FormItem>
                <FormItem label="鉴定报告：" prop="appraisal_report">
                    <upload v-if='formdataFinished' :is-delete='false' v-model="formData.appraisal_report" :upload-config="jdImguploadConfig"
                             @on-upload-change='uploadChange'></upload>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="editExcute" :loading='saveLoading'>保存</Button>
            </div>
            <div class="demo-spin-container" v-if='spinLoading === true'>
                <Spin fix>
                    <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                    <div>加载中...</div>
                </Spin>
            </div>
        </Modal>

    </div>
</template>
<script>
  import Upload from '_c/common/upload'
  import {edit, getInfoById} from '@/api/car'

  export default {
    components: {
      Upload
    },
    props: {
      modalId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        modalShow: true,
        saveLoading: false,
        spinLoading: true,
        formdataFinished: false,
        formData: {
          brand: '',
          series: '',
          frame_no: '',
          new_price: 0,
          mileage: 0,
          first_at: '',
          filed_at: '',
          diagnosis_at: '',
          engineer: '',
          engineer_comment: '',
          diagnosis_report: [],
          appraisal_report: [],
        },
        rules: {
          brand: [
            {required: true, message: '请填写品牌名称', trigger: 'blur'},
            {type: 'string', min: 1, message: '品牌名称至少要 2 个字符', trigger: 'blur'}
          ],
          series: [
            {required: true, message: '请填写系列名称', trigger: 'blur'}
          ],
          frame_no: [
            {required: true, message: '请填写车架号', trigger: 'blur'},
            {len: 17, message: '车架号必须是17位', trigger: 'blur'}
          ],
          mileage: [
            {required: true, type: 'number', message: '请填写行驶里程', trigger: 'blur'},
            {pattern: /^[0-9\.]+$/, message: '必须填写数字'}
          ],
          new_price: [
            {required: true, message: '请填写汽车价格', trigger: 'blur'},
            {pattern: /^[0-9\.]+$/, message: '格式错误'}
          ],
          first_at: [
            {required: true, message: '请填写登记时间', trigger: 'blur'}
          ],
          diagnosis_at: [
            {required: true, message: '请填写诊断日期', trigger: 'blur'}
          ],
          engineer: [
            {required: true, message: '请填写诊断工程师', trigger: 'blur'}
          ],
          engineer_comment: [
            {required: true, message: '请填写诊断评价', trigger: 'blur'}
          ],
        },
        zdImguploadConfig: {
          headers: {
            'Authorization': window.access_token
          },
          format: ['jpg', 'jpeg', 'png', 'gif'],
          max_size: 3072, // 3M
          upload_url: window.uploadUrl.uploadDiagnosis,
          file_name: 'file',
          multiple: false,
          file_num: 6,
          default_list: []
        },
        // 鉴定报告配置
        jdImguploadConfig: {
          headers: {
            'Authorization': window.access_token
          },
          format: ['jpg', 'jpeg', 'png', 'gif'],
          max_size: 3072, // 3M
          upload_url: window.uploadUrl.uploadAppraisal,
          file_name: 'file',
          multiple: false,
          file_num: 4,
          default_list: []
        },
      }
    },
    mounted() {
      if (this.modalId > 0) {
        this.getInfoByIdExcute()
      }
    },
    methods: {
      getInfoByIdExcute() {
        let t = this;
        getInfoById(t.modalId).then(res => {
          let res_data = res.data
          t.formData = {
            id: res_data.id,
            brand: res_data.brand,
            series: res_data.series,
            frame_no: res_data.frame_no,
            new_price: res_data.new_price,
            mileage: res_data.mileage,
            first_at: res_data.first_at,
            filed_at: res_data.filed_at,
            diagnosis_at: res_data.diagnosis_at,
            engineer: res_data.engineer,
            engineer_comment: res_data.engineer_comment,
            diagnosis_report: res_data.diagnosis_report,
            appraisal_report: res_data.appraisal_report,
          }
          t.zdImguploadConfig.default_list = t.formData.diagnosis_report
          t.jdImguploadConfig.default_list = t.formData.appraisal_report
          t.formdataFinished = true
          t.spinLoading = false
        })
      },
      editExcute() {
        let t = this;
        t.$refs.formData.validate((valid) => {
          if (valid) {
            t.saveLoading = true
            edit(t.modalId, t.formData).then(res => {
              t.saveLoading = false
              t.modalShow = false
              t.$emit('on-edit-modal-success')
              this.$emit('on-edit-modal-hide')
              t.$Notice.success({
                title: res.message
              })
            }, function (error) {
              t.saveLoading = false;
            })
          } else {
            t.saveLoading = false
          }
        })
      },
      cancel() {
        this.modalShow = false
        this.$emit('on-edit-modal-hide')
      },
      editContentChange(html, text) {
        // console.log(this.formData.content)
      },
      uploadChange(fileList, formatFileList) {
        // if (fileList.length > 0) {
        //   this.formData.diagnosis_report = formatFileList.attachment_id
        // }
      },
      handleFirstChange(value) {
        this.formData.first_at = value;
      },
      handleDiagnosisChange(value) {
        this.formData.diagnosis_at = value;
      },
    }
  }
</script>
